<template>
  <div class="position-adjust">
    <div class="adjust-header">
      <span>位置调整</span>
      <div class="icon-box">
        <i class="el-icon-minus"></i>
        <i class="el-icon-circle-close close-btn" @click="close"></i>
      </div>
    </div>

    <div class="adjust-body" v-if="showEditPanel">
      <div class="label-pick body-item">
        <el-button type="primary" @click="pickModel">选择模型</el-button>
      </div>

      <div v-if="editModelForm">
        <div class="label-name body-item">
          <span>模型名称</span>
          <el-input v-model="editModelForm.name" :disabled="true"></el-input>
        </div>

        <div class="label-lng position-box body-item">
          <span>经度</span>
          <el-input-number v-model="editModelForm.position.lng" controls-position="right" :min="0" :max="180" :step="0.00001" @change="changeModelInfo"></el-input-number>
        </div>

        <div class="label-lat position-box body-item">
          <span>纬度</span>
          <el-input-number v-model="editModelForm.position.lat" controls-position="right" :min="0" :max="90" :step="0.00001" @change="changeModelInfo"></el-input-number>
        </div>

        <div class="label-height position-box body-item">
          <span>高度</span>
          <el-input-number v-model="editModelForm.position.height" controls-position="right" :step="0.1" @change="changeModelInfo"></el-input-number>
        </div>

        <div class="label-scale position-box body-item">
          <span>缩放</span>
          <el-input-number v-model="editModelForm.scale" controls-position="right" :min="1" :step="1" @change="changeModelInfo"></el-input-number>
        </div>

        <div class="label-heading orientation-box body-item">
          <span>方位角</span>
          <el-slider v-model="editModelForm.position.heading" show-input :min="-180" :max="180" :step="0.1" input-size="mini" @change="changeModelInfo"></el-slider>
        </div>

        <div class="label-pitch orientation-box body-item">
          <span>俯仰角</span>
          <el-slider v-model="editModelForm.position.pitch" show-input :min="-180" :max="180" x :step="0.1" input-size="mini" @change="changeModelInfo"></el-slider>
        </div>

        <div class="label-rol orientation-box body-item">
          <span>翻滚角</span>
          <el-slider v-model="editModelForm.position.roll" show-input :min="-180" :max="180" :step="0.1" input-size="mini" @change="changeModelInfo"></el-slider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EditModel from '@/components/toolBar/positionAdjust/js/editModel.js';
export default {
  data() {
    return {
      showEditPanel: true,
      editModelForm: null
    };
  },

  methods: {
    // 拾取模型
    pickModel() {
      this._EditModel.pickModel({
        callback: (primitive) => {
          this.editModelForm = primitive.attribute;
        }
      });
    },

    // 模型编辑面板
    changeModelInfo() {
      const { position, scale } = this.editModelForm;
      const { lng, lat, height, heading, pitch, roll } = position;
      this._EditModel.updateByParams({ lng, lat, height, heading, pitch, roll, scale });
    },

    // 更新视图
    updateToView(modeInfo) {
      for (let k in modeInfo) {
        modeInfo[k] = Number(modeInfo[k]);
      }
      const { lng, lat, height, heading, pitch, roll, scale } = modeInfo;
      this.editModelForm.position = { lng, lat, height, heading, pitch, roll };
      this.editModelForm.scale = scale;
    },

    close() {
      this.$emit('close');
    }
  },

  created() {
    this.viewer = this.Global.viewer;
    this._EditModel = new EditModel({ Vm: this, viewer: this.viewer });
  },

  beforeDestroy() {
    this._EditModel.destroy();
  }
}
</script>

<style lang="less" scoped>
.position-adjust {
  position: fixed;
  right: 10px;
  top: 94px;
  width: 265px;
  padding: 15px 0;
  box-sizing: border-box;
  border-radius: 3px;
  background-color: #333333;
  z-index: 999;
  .adjust-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 15px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #565656;
    font-size: 14px;
    color: #b4b4b4;

    .icon-box {
      display: flex;
      align-items: center;
      column-gap: 15px;
      height: 100%;
      i {
        cursor: pointer;
      }
    }
  }

  .adjust-body {
    .body-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 15px 10px 0 10px;
      box-sizing: border-box;
      font-size: 14px;
      color: #b4b4b4;
      & > span {
        margin-bottom: 10px;
      }

      .describe-num-words {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-bottom: 0;
        margin-top: 10px;
      }
    }

    .label-pick {
      /deep/.el-button {
        border: none;
        background: #474747;
        &:hover {
          background: #6f99e4;
        }
      }
    }

    .label-name {
      /deep/.el-input__inner {
        background: rgba(0, 0, 0, 0);
        border: none;
        border-bottom: 1px solid #565656;
        border-radius: 0;
        padding: 0;
        font-size: 14px;
        color: #fff;
      }
    }

    .position-box,
    .orientation-box {
      /deep/.el-input-number {
        width: 100%;
        height: 30px;

        .el-input-number__decrease,
        .el-input-number__increase,
        .el-input__inner {
          background-color: rgba(0, 0, 0, 0);
        }

        .el-input-number__decrease,
        .el-input-number__increase {
          &:hover {
            color: #6fa7e8;
          }
        }

        .el-input__inner {
          border: 1px solid #e6e6e6;
          font-size: 14px;
          color: #fff;
          &:hover {
            border: 1px solid #e6e6e6;
          }
        }
      }
    }

    .orientation-box {
      /deep/.el-input-number {
        width: 100px;
        .el-input-number__decrease,
        .el-input-number__increase {
          width: 18px;
        }

        .el-input__inner {
          padding: 0 10px;
        }
      }

      /deep/.el-slider {
        padding-left: 10px;
        box-sizing: border-box;
        .el-slider__runway {
          width: 50%;
        }
      }
    }
  }
}
</style>